<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        html, body {
            overflow: hidden;
            background-color: rgba(0,0,0,1);
			-webkit-user-select:none;
			-moz-user-select:
			none-ms-user-select:none;
        }

        p {
            margin: 0 auto 0 auto;
        }

        .panel {
            background: rgba(110,0,0,0.0);
            height: 1000px;
            width: 1000px;
            position: absolute;
            top: 50%;
            left: 50%;
            overflow: hidden;
            color: #ffffff;
            margin-top: -500px;
            margin-left: -500px;
        }
        .panel2 {
            background: rgba(110,0,0,0.0);
            height: 1000px;
            width: 1000px;
            position: absolute;
            top: 50%;
            left: 50%;
            overflow: hidden;
            color: #ffffff;
            margin-top: -500px;
            margin-left: -500px;
        }
    </style>
</head>
<body style="background-color: black;">

        <div class="panel">
            <div id="clockbox" style="        text-align: center;
        z-index: -50;
        color: darkgrey;
        font-size: 266px;
        width: 1000px;
        height: 1000px;
        vertical-align: middle;
        display: table-cell;
        background-color: rgba(110,0,0,0.0);
    "></div>

        </div><div class="panel2">
    <div id="datebox" style="        text-align: center;
        z-index: 50;
        color: darkgrey;
        font-size: 66px;
        margin: 65% auto;
        background-color: rgba(110,0,0,0.0);
    "></div>
</div>



    <script type="text/javascript">
        var strcolor = 'black';
        function GetClock() {
            var d = new Date();
            var nhour = d.getHours(), nmin = d.getMinutes();
            if (nmin <= 9) nmin = "0" + nmin


            if (strcolor == 'darkgrey') strcolor = 'black';
            else strcolor = 'darkgrey';

            var clocktext = "<strong>" + nhour + "<font color='" + strcolor + "'>:</font>" + nmin + "</strong>";
            document.getElementById('clockbox').innerHTML = clocktext;
        }

        GetClock();
        setInterval(GetClock, 1000);

        //////

        function panelScale() {
            document.querySelector('.panel').setAttribute('style', 'transform:scale(' + Math.min(window.innerWidth, window.innerHeight) / 1000 + ')')
            document.querySelector('.panel2').setAttribute('style', 'transform:scale(' + Math.min(window.innerWidth, window.innerHeight) / 1000 + ')')
        }

        panelScale();
        window.addEventListener('resize', panelScale);

        ////////

        //var tday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        //var tmonth = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        var tday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var tmonth = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

        function GetDate() {
            var d = new Date();
            var nday = d.getDay(), nmonth = d.getMonth(), ndate = d.getDate(), nyear = d.getFullYear();

            var clocktext = "" + tday[nday] + "， " + tmonth[nmonth] + " " + ndate + "日， " + nyear + "年";
            document.getElementById('datebox').innerHTML = clocktext;
        }

        GetDate();
        setInterval(GetDate, 1000);
    </script>


</body>
</html> 作者：iSaver动态锁屏屏保引擎 https://www.bilibili.com/read/cv13423990 出处：bilibili